<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>代理商信息</title>
  <link rel="stylesheet" href="./css/bootstrap.css">
  <link rel="stylesheet" href="./css/bootstrap.css">
  <script src="./js/vue.js"></script>
  <script src="./js/axios.min.js"></script>
  <link rel="stylesheet" href="./js/layui-v2.4.5/layui/css/layui.css">
  <script src="./js/layui-v2.4.5/layui/layui.js"></script>
  <style>
    .card-body .form-group{
      width:25%;
    }
  </style>
</head>
<body>
  <div class="container-fiuld p-3" id="app">
    <div class="card">
      <div class="card-header bg-transparent border-0">
        <h2>代理商信息</h2>
      </div>
      <div class="card-body">
        <div class="mb-4">
          <button class="btn btn-primary btn-md">添加下级代理商账户</button>
          <button class="btn btn-secondary btn-md">下级代理商账户</button>
        </div>
        <h3>添加下级代理商账户</h3>
        <form  class="layui-form mt-3">
          <div class="form-group">
            <label for="email">代理登录用户名:</label>
            <input type="email" name="username" required  lay-verify="required" class="form-control" id="email" placeholder="请输入代理用户名">
          </div>
          <div class="form-group">
            <label for="pwd">代理商登录密码:</label>
            <input type="password" class="form-control" name="password" required  lay-verify="required" id="pwd" placeholder="请输密码">
          </div>
          <div class="form-group">
            <label for="pwd">代理商名称:</label>
            <input type="text" class="form-control" name="name" lay-verify="required">
          </div>
          <div class="form-group">
            <label for="pwd">代理商地址:</label>
            <input type="text" class="form-control" name="adress" lay-verify="required">
          </div>
          <div class="form-group">
            <label for="pwd">代理商联系人:</label>
            <input type="text" class="form-control" name="contact" lay-verify="required">
          </div>
          <div class="form-group">
            <label for="pwd">代理商手机:</label>
            <input type="text" class="form-control" name="mobile" lay-verify="required">
          </div>

          <div class="form-group">
            <label for="pwd">代理商微信:</label>
            <input type="text" class="form-control" name="wechat">
          </div>
          <div class="form-group">
            <label for="pwd">代理商QQ:</label>
            <input type="text" class="form-control" name="qq">
          </div>
          <div class="form-group">
            <label for="pwd">代理商邮箱:</label>
            <input type="text" class="form-control" name="email">
          </div>
          <div class="form-group">
            <label for="pwd">代理商支付宝账户:</label>
            <input type="text" class="form-control" name="alipay">
          </div>
          <button type="button" class="btn btn-primary" lay-submit lay-filter="addAgent">提交</button>
          <button type="reset" class="btn btn-danger">重置</button>
        </form>
      </div>
      <div class="card-footer bg-transparent border-0">
      </div>
    </div>
  </div>
  <script>
    //数据操作
    layui.use(["form","layer"],function(){
      var form = layui.form,$ = layui.$,layer = layui.layer;
      form.on('submit(addAgent)',function(data){
        var agentMsg = JSON.stringify(data.field);
        console.log(JSON.stringify(data.field))
        $(".btn.btn-primary").html("<i class='layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop'></i>")
        $.ajax({
          url:"http://www.cps.com/agent/agentAdd",
          type:"POST",
          data:agentMsg,
          dataType:"json",
          crossDomain: true,
          success:function(res){
            layer.msg('提交成功', {icon: 1});
            console.log(res)
          },
          error:function(err){
            layer.msg('提交失败', {icon: 5});
            $(".btn.btn-primary").html("提交")
            console.log(err)
          }
        })
        return false;
      })
    })
    /*var vm = Vue({
      el:"#app",
      data:{
        agentMsg:{
          username:"",
          password:'',
          name:"",
          mobile:"",
          wechat:"",
          qq:"",
          email:"",
          address:"",
          contact:"",
          alipay:""
        }
      },
      method:{
        addAgent(){
        }
      }
    })*/
  </script>
</body>
</html>